<html>

<head>
  <script type="module" src="../lib/wired-slider.js"></script>

  <style>
    body {
      margin: 0;
      padding: 10px;
      font-family: sans-serif;
      line-height: 1.5;
    }

    wired-slider {
      margin: 16px 0;
      max-width: 100%;
      box-sizing: border-box;
    }

    .custom {
      width: 200px;
      --wired-slider-knob-color: green;
      --wired-slider-bar-color: blue;
    }
  </style>
</head>

<body>
  <wired-slider></wired-slider>
  <br>
  <wired-slider value="40" style="width: 600px;"></wired-slider>
  <br>
  <wired-slider value="10" min="5" max="15"></wired-slider>
  <br>
  <wired-slider value="60" disabled></wired-slider>
  <br>
  <wired-slider class="custom" value="25"></wired-slider>
</body>

</html>